<template>
	<view class="app app-bg">
		<!-- 页面内容开始 -->
		<u-gap height="1" bg-color="#f3f3f3"></u-gap>
		<view v-for="(item, index) in form1.goods_sku_list" :key="index" class="card">
			<u-gap height="80" bg-color="#f3f3f3"></u-gap>
			<view class="header">
				<image :src="item.image" class="image" mode="aspectFill"></image>
				<view class="text-one sku-name">{{ item.sku_name }}</view>
				<u-gap height="20" bg-color="#ffffff"></u-gap>
				<view>
					<text>评分：</text>
					<u-rate v-model="item.stars"></u-rate>
				</view>
				<u-gap height="20" bg-color="#ffffff"></u-gap>
			</view>
			<view class="content">
				<view class="centre-tips">客观真实的评价能帮助用户做决策</view>
				<view style="margin-top: 20rpx;">
					<vk-data-input v-model="item.content" placeholder="从多个角度评价宝贝，可以帮助更多想买的人" type="textarea" height="200" :focus="item.focus" @blur="item.focus = false" />
					<view class="upload">
						<vk-data-upload v-model="item.images" :limit="9" :show-header="false" title="请上传图片(最多9张)" style="margin-top: 10rpx;" ></vk-data-upload>
					</view>
				</view>
			</view>
		</view>
		<view style="margin-top: 100rpx;text-align: center;" v-if="complete">
			<u-button type="success" style="width: 80%;" @click="submit">提交</u-button>
		</view>

		<u-gap height="100" bg-color="#f3f3f3"></u-gap>

		<!-- 页面内容结束 -->

		<!-- 全局公共浮球导航模块 -->
		<vk-data-float-ball :scroll-top="scrollTop"></vk-data-float-ball>
		<vk-data-loading v-model="loading"></vk-data-loading>
	</view>
</template>

<script>
var vk = uni.vk;
export default {
	data() {
		// 页面数据变量
		return {
			// 表单请求数据
			form1: {
				goods_sku_list: []
			},
			loading: false,
			scrollTop: 0,
			complete: false
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	// 监听 - 下拉
	onPullDownRefresh() {
		this.init(this.options);
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	// 监听 - 页面触底部
	onReachBottom() {},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options = {}) {
		vk = uni.vk;
		this.options = options;
		this.init(options);
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {
		let that = this;
	},
	// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
	onShow() {},
	// 监听 - 页面每次【隐藏时】执行(如：返回)
	onHide() {},
	// 函数
	methods: {
		// 页面数据初始化函数
		init() {
			vk.callFunction({
				url: "client/order.getInfo",
				loading: true,
				data: {
					_id: this.options._id
				},
				success: data => {
					// 默认5分
					data.orderInfo.goods_sku_list.map((item, index) => {
						item.stars = 5;
					});
					this.form1.goods_sku_list = data.orderInfo.goods_sku_list;
					this.complete = true;
				}
			});
		},
		submit() {
			let that = this;
			let { form1 } = that;
			let errMsg = "";
			for (let i = 0; i < form1.goods_sku_list.length; i++) {
				let item = form1.goods_sku_list[i];
				if (!item.content || item.content.length < 2) {
					errMsg = "评论内容不能小于2个字";
					that.$set(item, "focus", true);
					break;
				}
			}
			if (errMsg) {
				vk.toast(errMsg);
				return false;
			}
			let list = form1.goods_sku_list.map((item, index) => {
				return {
					goods_id: item.goods_id,
					goods_name: item.goods_name,
					sku_id: item._id,
					sku_name: item.sku_name,
					content: item.content,
					images: item.images,
					stars: item.stars
				};
			});
			vk.callFunction({
				url: "client/order.addComment",
				loading: true,
				data: {
					_id: this.options._id,
					list
				},
				success: data => {
					const eventChannel = this.getOpenerEventChannel();
					if (eventChannel.emit) eventChannel.emit("update", { status: 6 }); // 触发A页面的 update 监听事件
					vk.alert("提交成功", () => {
						setTimeout(() => {
							vk.navigateBack();
						}, 300);
					});
				}
			});
		}
	},
	// 监听器
	watch: {},
	// 计算属性
	computed: {}
};
</script>
<style lang="scss" scoped>
.card {
	display: block;
	.header {
		background-color: #ffffff;
		display: block;
		border-radius: 20rpx;
		margin: 0 20rpx;
		padding: 20rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		.image {
			width: 100rpx;
			height: 100rpx;
			position: absolute;
			top: -50rpx;
			border-radius: 20rpx;
		}
		.sku-name {
			margin-top: 30rpx;
			color: #606266;
			font-size: 24rpx;
		}
	}
	.content {
		background-color: #ffffff;
		display: block;
		border-radius: 20rpx;
		margin: 0 20rpx;
		border-top: 1rpx dashed #f3f3f3;
		padding: 20rpx;
		position: relative;
		.centre-tips {
			position: absolute;
			color: #909399;
			top: -18rpx;
			font-size: 24rpx;
			width: 100%;
			text-align: center;
		}
		.upload {
			border: 1rpx dashed #f3f3f3;
			border-radius: 20rpx;
		}
	}
}
</style>
